<template>
    <div class="">
        <div class="flex flex-col gap-4 p-4">
            <!-- 收货人 -->
            <div class="flex flex-col">
                <label for="name" class="text-sm font-medium text-gray-700 mb-1">收货人</label>
                <input id="name" v-model="formData.name" type="text" class="form-input" placeholder="请输入收货人姓名" required />
            </div>

            <!-- 手机号码 -->
            <div class="flex flex-col">
                <label for="phonenumber" class="text-sm font-medium text-gray-700 mb-1">手机号码</label>
                <input id="phonenumber" v-model="formData.phonenumber" type="tel" class="form-input" placeholder="请输入手机号码" required />
            </div>

            <!-- 所在地区 -->
            <div class="flex flex-col">
                <label class="text-sm font-medium text-gray-700 mb-1">所在地区</label>
                <uni-data-picker
                    :localdata="pcaCode"
                    :map="{ text: 'name', value: 'name' }"
                    popup-title="请选择"
                    @change="onchange"
                    @nodeclick="onnodeclick"
                ></uni-data-picker>
            </div>

            <!-- 详细地址 -->
            <div class="flex flex-col">
                <label for="address" class="text-sm font-medium text-gray-700 mb-1">详细地址</label>
                <input
                    id="address"
                    v-model="formData.address"
                    type="tel"
                    class="form-input"
                    placeholder="请输入详细地址信息，如街道、门牌号等"
                    required
                />
            </div>

            <!-- 立即领取按钮 -->
            <button
                type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-4 transition duration-300 ease-in-out"
                @click="submitForm"
            >
                立即领取
            </button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import pcaCode from "china-division/dist/pca-code.json";

const formData = ref({
    name: "",
    phonenumber: "",
    province: "",
    city: "",
    district: "",
    address: ""
});

interface Props {
    goodsId: number;
}

const props = defineProps<Props>();

const onnodeclick = (node: any) => {
    // 处理节点点击事件
    console.log("选中的节点:", node);
};

const onchange = ({ detail }: any) => {
    const [province, city, district] = detail.value;
    console.log("选中的地区:", province.value, city.value, district.value);

    formData.value.province = province.value;
    formData.value.city = city.value;
    formData.value.district = district.value;
};

// 提交表单
const submitForm = () => {
    // 这里可以添加表单验证逻辑
    console.log("提交的商品ID:", props.goodsId);
    console.log("提交的表单数据:", formData.value);

    // 这里可以添加API调用来提交表单数据
    // 例如：调用后端API保存收货信息
    uni.request({
        url: "/api/submit/submit",
        method: "POST",
        data: {
            goods_id: props.goodsId,
            ...formData.value
        },
        success: ({ data }: any) => {
            if (data.code === 200) {
                uni.showModal({
                    title: "提示",
                    content: "提交成功",
                    showCancel: true
                });
                // 刷新首页
                location.reload();
            } else {
                uni.showToast({
                    title: "提交失败, " + data.message,
                    icon: "none"
                });
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.form-input,
.input-value {
    background: #fff;
    border-radius: 10rpx;
    border: 1px solid #e5e5e5;
    padding: 10rpx 10px;
    font-size: 30rpx;
    height: 35rpx;
}

::v-deep .placeholder {
    font-size: 30rpx !important;
}
</style>
